<template>
  <div>
    <div class="heart_w" style="margin-top: 80px">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/questionBank' }">
          FRM
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          {{
            'CFA-2024 Level I-Financial Statement Analysis-Learning Module 3 Analyzing Balance Sheets'
          }}
        </el-breadcrumb-item>
      </el-breadcrumb>

      <div style="display: flex; justify-content: space-between">
        <div class="testBox">
          <div
            class="top"
            v-if="
              (nowposition + 1 && practiceObj.type == 1) ||
              practiceObj.type == 2 ||
              practiceObj.type == 3
            "
          >
            <h5>
              {{ nowposition + 1 }}.[
              {{
                practiceObj.type == 1
                  ? '单项选择题'
                  : practiceObj.type == 2
                  ? '多选题'
                  : practiceObj.type == 3
                  ? '判断题'
                  : practiceObj.type == 4
                  ? '填空题'
                  : '测试题'
              }}]
            </h5>
            <div class="operations">
              <div @click="wd_show = true">
                <img src="@/assets/images/ask1.png" alt="" />
                <span>提问</span>
              </div>
              <div @click="correct_err_show = true">
                <img src="@/assets/images/errorCor1.png" alt="" />
                <span>纠错</span>
              </div>
              <div @click="shoucang()">
                <img v-if="!false" src="@/assets/images/collected.png" alt="" />
                <img v-if="false" src="@/assets/images/noCollect.png" alt="" />
                <span v-if="false">取消收藏</span>
                <span v-if="!false">收藏</span>
              </div>
            </div>
          </div>

          <!-- 单选/多选 -->
          <div
            v-if="
              (practiceObj.id == nowposition + 1 && practiceObj.type == 1) ||
              practiceObj.type == 2 ||
              practiceObj.type == 3
            "
          >
            <div class="testTit" v-html="case_content"></div>
            <div class="options">
              <div
                class="optionBox"
                v-for="(item, index) in oplistPractice"
                :key="index"
                @click="chose_answer(item, practiceObj, index)"
                :class="{
                  activeCss: item.is_xuan && index + 1
                }"
              >
                <div class="option">
                  {{ item.value }}
                </div>
                <div class="optionText">{{ item.title }}</div>
              </div>
            </div>
          </div>

          <!-- text文本题 -->
          <div v-if="practiceObj.type == '4'">
            <div class="testTit">{{ practiceObj.title }}</div>
            <input
              v-model="practiceObj.user_answer"
              type="text"
              class="textinput"
              @blur="chose_answer(practiceObj.op, practiceObj)"
            />
          </div>

          <!-- footer按钮 -->
          <div class="openAnalysis" v-if="!false">
            <div class="btn" @click="toscan()">查看解析</div>
            <div
              class="btn"
              @click="toprev(nowposition)"
              style="margin-left: 10px"
            >
              上一题
            </div>
            <div class="btn" @click="tonext()">下一题</div>
          </div>

          <div class="analysisBox" v-if="user_analysis">
            <!-- 试题解析 -->
            <div class="yourAns">
              正确答案：<span>A</span>
              &nbsp;&nbsp;您的答案：
              <!-- oplist[Number(item.answer - 1)] -->
              <span v-if="false" style="color: #00af63"> B </span>
              <span v-else style="color: #ff8a8d"> C </span>
            </div>
            <!-- 视频解析 -->
            <div>
              <span class="tit">视频解析：</span>
              <div
                class="video"
                style="width: 530px; height: 100%; background: #e0e0e0"
              >
                <video-player
                  class="video-player vjs-custom-skin"
                  ref="videoPlayer"
                  :playsinline="true"
                  :options="playerOptions"
                  @play="onPlayerPlay($event)"
                  @pause="onPlayerPause($event)"
                  @playing="onPlayerPlaying($event)"
                  @ended="onPlayerEnded($event)"
                >
                </video-player>
              </div>
            </div>
            <!-- 答案解析 -->
            <div v-if="!false">
              <span class="tit">答案解析：</span>
              <p style="width: 690px" v-html="analysis"></p>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="top">
            <div class="timePause">
              <p class="time">
                用时：<span> {{ timing }} </span>
              </p>
              <button @click="stop">暂停</button>
            </div>
            <div class="progressBox" v-if="!false">
              <span>进度:</span>
              <el-progress
                :percentage="80"
                style="width: 125px"
                :stroke-width="10"
                color="0193ff"
                :show-text="false"
              >
              </el-progress>
              <span>0/16题</span>
            </div>
          </div>

          <div class="center">
            <!-- <button @click="Saveprogress()">保存进度下次继续</button> -->
            <button @click="submitShow = true">交卷</button>
          </div>

          <div class="tiList">
            <div class="tit">答题卡</div>
            <div class="listBox">
              <div class="testSitu">
                <p>已答</p>
                <p>未答</p>
              </div>
              <div class="list" style="padding-top: 10px">
                <span
                  @click="cardto(item, index)"
                  :class="{ nodo: item.is_do !== 1 }"
                  v-for="(item, index) in sheetArrList"
                  :key="index"
                >
                  {{ index + 1 }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 答疑 -->
    <transition name="leftToright">
      <div class="common_dialog ans_que" v-if="wd_show">
        <div class="inner_con">
          <div class="title">
            问答
            <div class="close" @click="close_wd"></div>
          </div>
          <div class="row">
            <button
              class="my_ans"
              style="background-color: #eb0808"
              @click="get_ask(1, 0)"
            >
              我的提问
            </button>
            <button
              class="other_ans"
              style="background-color: #fdaf42"
              @click="get_ask(0, 0)"
            >
              全部问答
            </button>
          </div>
          <div class="que_tit">
            <input
              type="text"
              v-model="wd_tit"
              placeholder="请输入需要提问的标题"
            />
          </div>
          <div class="que_info">
            <textarea placeholder="请输入您要提问的内容" v-model="wd_info">
            </textarea>
          </div>
          <div class="upd_box">
            <el-upload
              action="#"
              list-type="picture-card"
              :on-preview="imgPreview"
              :on-remove="handleRemove"
              :http-request="upload_img"
              :limit="3"
              :on-exceed="handleExceed"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </div>
          <div class="btm_btns">
            <button @click="close_wd">取消</button>
            <button @click="submit_wd">保存</button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 缩略图展示 -->
    <el-dialog :visible.sync="wd_preview_show">
      <img width="100%" :src="wd_preview_img" alt="缩略图" />
    </el-dialog>
    <!-- 问答列表 -->
    <transition name="leftToright">
      <div class="common_dialog ask_box" v-if="ask_show">
        <div class="inner_box">
          <div class="top">
            <img
              src="https://www.rongyuejiaoyu.com/static/index/images/head5.jpg"
              alt="user_ava"
            />
            <!-- <h5 :title="ask_tit">{{ ask_tit }}</h5> -->
            <h5>ask_tit</h5>
            <button @click="ask_show = false">关闭</button>
          </div>
          <div class="tit_div">
            <p class="count">0条提问</p>
            <div class="type">
              <p :class="{ act_type: ask_type == 1 }" @click="get_ask(1, 1)">
                我的
              </p>
              <p :class="{ act_type: ask_type == 0 }" @click="get_ask(0, 1)">
                全部
              </p>
            </div>
          </div>
          <div class="list_item">
            <div class="item" v-for="(e, i) in 3" :key="i">
              <div class="top_con">
                <div class="avatar_box"><img :src="e.avatar" alt="" /></div>
                <div class="ana_box">
                  <p class="name">{{ e.username }}123123</p>
                  <p class="time">{{ e.new_add_time }}000000</p>
                  <p class="con">{{ e.question_title }}444444444</p>
                </div>
              </div>
              <div class="img_box">
                <img
                  @click="show_big(item)"
                  :src="item"
                  alt=""
                  v-for="(item, index) in e.images"
                  :key="index"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 纠错 -->
    <transition name="leftToright">
      <div class="common_dialog jc_dialog" v-if="correct_err_show">
        <div class="inner_con">
          <div class="title">
            纠错
            <div class="close" @click="close_err"></div>
          </div>
          <div class="body">
            <p class="t_title">
              CFALevel II“甄”题库Economics(2024N) LM1 Currency Exchange Rates:
              Understanding Equilibrium Value
            </p>
            <div class="choose_box">
              <el-radio-group v-model="error_form.err_choose">
                <el-radio size="medium" label="0">答案错误</el-radio>
                <el-radio size="medium" label="1">功能问题</el-radio>
                <el-radio size="medium" label="2">错误解析</el-radio>
                <el-radio size="medium" label="3">判分错误</el-radio>
                <el-radio size="medium" label="4">排版错误</el-radio>
                <el-radio size="medium" label="5">其他</el-radio>
              </el-radio-group>
            </div>
            <textarea
              placeholder="感谢您的意见和体验感受，我们一定会快速解决您的..."
              class="jc_input"
              v-model="error_form.correct_info"
            >
            </textarea>
            <div class="concat">
              联系方式：
              <input
                placeholder="您的手机号"
                type="text"
                v-model="error_form.your_phone"
              />
            </div>
          </div>
          <div class="btm_btn">
            <button class="cancel" @click="close_err">取消</button>
            <button class="sure" @click="submit_err()">确定</button>
          </div>
        </div>
      </div>
    </transition>

    <!-- 交卷 -->
    <transition name="leftToright">
      <div class="mask_unfinished" v-show="submitShow">
        <div class="kuang" ref="isDomsk">
          <img
            src="https://www.rongyuejiaoyu.com/newzhike/img/unfinished.png"
            alt=""
          />
          <p>确认提交试卷？</p>
          <div class="error_btn">
            <a href="javascript:void(0);" class="a_submit" @click="submitTest">
              提交
            </a>
            <a
              href="javascript:void(0);"
              class="a_cancel"
              @click="submitShow = false"
            >
              取消
            </a>
          </div>
        </div>
      </div>
    </transition>

    <!-- 暂停做题 -->
    <transition name="leftToright">
      <div class="mask-pause" v-show="pauseShow">
        <div class="kuang">
          <img
            src="https://www.rongyuejiaoyu.com/newzhike/img/icon-save.png"
            alt=""
          />
          <p>休息一下，马上回来！</p>
          <div class="stopBtn" @click="pauseHidee">继续做题</div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
// import { getTopic, startStudy, endStudy } from '@/api/FRM.js'
import {
  getCourseDetails,
  getRecordSubmit,
  getTopicListByZhike,
  // checkSubmitLogByZhike,
  addSubmitLogByZhike,
  getTopLogByZhike
} from '@/api/newzhike/questionBank.js'

export default {
  name: 'practice',
  data() {
    return {
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为, 立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: 'video/mp4', // 类型
            src: 'https://video.rycfa.com/sv/1891c9ee-18bcb9fc4cd/1891c9ee-18bcb9fc4cd.mp4' // url地址
          }
        ],
        // poster: '@/assets/images/material/video-bg.png', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      case_content: '',
      analysis:
        '<p>A&nbsp;</p><p>SSE = 4,320, SST = 9,105. RSS = 9,105 - 4,320 = 4,785. n = 65, k = 4.&nbsp;</p><p>R <sup>2</sup> = 4,785 / 9,105 = 0.53.&nbsp;</p><p><img src="http://www.rongyuejiaoyu.com/ueditor/php/upload/image/20231116/1700120405568409.png" title="1700120405568409.png" alt="image.png"/></p>',
      wd_tit: '', // 问答标题
      wd_info: '', // 问答内容
      filelist: [], // 文件上传列表
      ask_list: [], // 问答列表
      wd_preview_show: false, // 控制打开变量
      wd_preview_img: '', // 缩略图文件
      anaShow: false,
      submitShow: false, // 交卷
      nowposition: 0, //当前题的题号
      position: 1,
      user_answer_index: -1,
      opena: -1, // 1 掌握 2未掌握 -1 初始值
      seconds: 0, // 计时时间
      user_analysis: false,
      pauseShow: false,
      timing: '00:00:00',
      Init: null,
      testTime: 0,
      ask_type: 1,
      ask_show: false,
      wd_show: false, // 提问
      correct_err_show: false, // 纠错
      error_form: {
        err_choose: '0', // 纠错/复选框
        correct_info: '', // 纠错/文本域
        your_phone: '' // 纠错/ 手机号
      },
      cate_name: '',
      xq_report: 0, //学习报告id
      cardtype: 1, // 答题卡 题型参数
      testarr: [], // 请求返回的单选题暂存数组list
      topicarr: [], // 请求返回的题目重组数组
      oplist: ['A', 'B', 'C', 'D', 'E'], //选项序号 循环数组
      oplistPractice: [],
      practiceObj: {},
      ids: '',
      log_ids: '',
      topiceList: [],
      anserwData: [],
      sheetArrList: [],
      answerList: [] // 答案集
    }
  },
  created() {
    this.ids = this.$route.query.id
    this.start()
    console.log(this.$route.query, '222222222')
    // this.getTopicData()
    this.zhikeParticulars()
  },
  mounted() {
    if (this.$route.name == 'practice') {
      this.addOne()
    }
  },
  methods: {
    zhikeParticulars() {
      let _that = this
      // 做题详情
      getTopicListByZhike({ cid: _that.ids }).then(({ data: data_z }) => {
        _that.topiceList = data_z.data.list
        _that.log_ids = data_z.data.log_id
        this.getCourseDetails(data_z.data.list[0]?.id)
        this.AnswerSheet(data_z.data.log_id)
        console.log(data_z)
      })
    },
    getCourseDetails(tids) {
      let _that = this
      let params_t = {
        tid: tids, //题ID :案例 1 单选 2多选 3判断 4 填空 5问答 6 case
        cid: _that.ids,
        log_id: _that.log_ids
      }
      getCourseDetails(params_t).then(({ data: data }) => {
        this.$set(data.data, 'user_answer_index', -1)
        let arr = data.data.op.filter((ele, index) => {
          return ele.is_xuan == true
        })
        if (data.data.collection) {
          data.data.collection = data.data.collection
        } else {
          data.data.collection = false
        }
        if (data.data.is_value) {
          data.data.is_value = data.data.is_value
        } else {
          data.data.is_value = arr.length <= 0 ? '' : arr[0].value
        }
        _that.case_content = data.data.title
        this.practiceObj = data.data
        _that.oplistPractice = data.data.op
      })
    },
    AnswerSheet() {
      let sheet = {
        cid: this.ids,
        log_id: this.log_ids
      }
      getTopLogByZhike(sheet).then(({ data: data }) => {
        this.sheetArrList = data.data.list
      })
    },
    toprev(now) {
      this.nowposition = Number(now) - 1
      if (now < 1) {
        this.nowposition = 0
        this.position = 1
        this.$message.warning({
          message: '没有上一题了',
          type: 'warning',
          iconClass: ' ', // 这个会覆盖图标类名，为了实现去掉图标的操作
          customClass: 'el-message--warning',
          offset: 80
        })
        return false
      }
      this.getCourseDetails(this.topiceList[this.nowposition].id)
    },
    tonext() {
      let answerArr = []
      this.anserwData.map((ele, index) => {
        if (ele.is_xuan == true) {
          answerArr.push(ele.value)
        }
      })
      let answer_t = answerArr.join(',')

      this.nowposition = Number(this.position++)
      if (this.nowposition >= this.topiceList.length) {
        this.nowposition = this.topiceList.length - 1
        this.recordSubmitZhike(answer_t)
        this.$message.warning({
          message: '没有下一题了',
          type: 'warning',
          iconClass: ' ', // 这个会覆盖图标类名，为了实现去掉图标的操作
          customClass: 'el-message--warning',
          offset: 80
        })
        return false
      }
      this.recordSubmitZhike(answer_t)
      this.getCourseDetails(this.topiceList[this.nowposition].id)
      this.anserwData = []
    },
    recordSubmitZhike(answer_t) {
      // 提交做题记录
      let jilu = {
        answer: answer_t,
        cid: this.ids,
        log_id: this.log_ids,
        sort: this.topiceList[this.nowposition].sort,
        tid: this.topiceList[this.nowposition].id
      }
      getRecordSubmit(jilu).then(({ data: data }) => {
        console.log(data)
      })
    },
    addOne() {
      this.$store.commit('hideGlobalComponent', false)
    },
    get_ask(id, is_open) {
      if (!is_open) {
        this.wd_show = false
        this.ask_show = true
      }
      this.ask_type = id
    },
    toscan() {
      this.user_analysis = !this.user_analysis
    },
    submit_err() {},
    close_err() {
      // 纠错
      this.correct_err_show = false
      this.error_form.correct_info = ''
      this.error_form.your_phone = ''
      this.error_form.err_choose = '0'
    },
    // 收藏
    shoucang() {},
    chose_answer(option, item, index) {
      let _this = this
      if (item.type == '1') {
        // 单选题
        item.op = item.op.map((item) => ({
          ...item,
          is_xuan: item.value == option.value
        }))
        this.oplistPractice = item.op
      } else if (item.type == '2') {
        // 多选
        option.is_xuan = !option.is_xuan
      } else if (item.type == '3') {
        // 判断题
        item.op = item.op.map((item) => ({
          ...item,
          is_xuan: item.value == option.value
        }))
        this.oplistPractice = item.op
      } else if (item.type == '4') {
        // 填空题
        console.log(123, item.user_answer)
        // _this.answerList.push(item.user_answer)
      }

      //  选中选项
      let is_anserw = item.op.filter((ele, i) => {
        return ele.is_xuan == true
      })
      _this.answerList = is_anserw
      console.log(is_anserw, '选中答案项', _this.answerList)
    },
    // 暂停计时
    stop() {
      clearInterval(this.Init)
      this.pauseShow = true
      console.log(this.seconds)
    },
    pauseHidee() {
      this.pauseShow = false
      this.start()
    },
    async submitTest() {
      const { data: data } = await addSubmitLogByZhike({ log_id: this.log_ids })
      if (data.code == 1) {
        this.$router.push({
          path: 'testReport',
          query: { log_id: this.log_ids }
        })
      }
    },
    Saveprogress() {},
    isknow(position, item, answer) {
      let _this = this
    },
    // 答疑保存
    submit_wd() {},
    cardto(item, index) {
      //答题卡跳转
      console.log(item, index + 1)
      this.getCourseDetails(item.id)
      this.nowposition = index
      this.position = index + 1
    },
    close_wd() {
      this.wd_tit = ''
      this.wd_info = ''
      this.filelist = []
      this.wd_show = false
    },
    imgPreview(file) {
      console.log(file, '888888888')
      this.wd_preview_img = file.url
      this.wd_preview_show = true
    },
    handleRemove(file) {
      this.filelist.pop()
    },
    upload_img(res) {
      console.log(res, '22222222')
      this.filelist.push(res.file)
    },
    handleExceed() {
      this.$message({
        message: '最多上传三张图片！',
        type: 'warning',
        offset: 80
      })
    },
    start() {
      this.Init = setInterval(this.timers, 1000)
    },
    timers(num) {
      if (num) {
        this.seconds = this.testTime
      }
      this.seconds++
      var second = this.seconds % 60
      var minute = parseInt(this.seconds / 60) % 60
      var hour = parseInt(this.seconds / 3600)
      this.timing = `${hour < 10 ? '0' + hour : hour}:
      ${minute < 10 ? '0' + minute : minute}:
      ${second < 10 ? '0' + second : second}`
    },
    // 监听播放
    onPlayerPlay(player) {
      // this.$signalr.SendMsg(6301, this.id, '开始播放视频')
      console.log('开始播放视频')
    },
    // 暂停视频
    onPlayerPause(player) {
      // this.$signalr.SendMsg(6302, this.id, '暂停视频')
      console.log('暂停视频')
    },
    // 视频继续播放
    onPlayerPlaying(player) {
      // this.$signalr.SendMsg(6303, this.id, '视频继续播放')
      console.log('视频继续播放')
    },
    // 视频播放结束
    onPlayerEnded(player) {
      // this.$signalr.SendMsg(6304, this.id, '视频播放结束')
      console.log('视频播放结束')
    }
  },
  beforeDestroy() {
    // 组件实例被销毁时执行结束
    // this.xq_end()
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/index.scss';
// 与题库页面FRM页面使用相同样式注意修改变动
@import '@/assets/styles/frm_practice.scss';

.el-breadcrumb {
  font-size: 15px;
  padding: 24px 12px;
  border-radius: 5px;
  margin: 10px 0;
}

.tbtn {
  display: flex;
  div {
    margin-right: 12px;
    margin-top: 8px;
    cursor: pointer;
  }
}

.textinput {
  width: 100%;
  height: 70px;
  border: 1px solid #999;
  border-radius: 5px;
  padding: 5px;
  color: #333;
  font-size: 16px;
  line-height: 20px;
}
</style>
